<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #tab{
            width:990px;
            height: 45px;
            margin:50px auto
            }
        #thead{
            width:100%
            }
        #tab ul{
            background: rgb(218, 214, 214);
            height:45px;width:100%;
            border-bottom:1px solid rgb(255,0,0)
            }
        #tab ul li{
            float: left;
            width:auto;
            height:45px;
            line-height: 45px;
            text-align: center;
            padding:0 20px;
            font-size: 15px;
            list-style: none;
            }
        #tab li:hover{
            color: red;
        }
        #tab ul .a{
            background-color: red;
            color: #fff;
        }
        #tcon{
            clear: both;
        }
        #tcon div{
            display: none;
        }
        #tcon .b{
            display: block;
            padding: 40px;
        }

    </style>
</head>
<body>
    <div id="tab">
        <div id="thead">
            <ul>
                <li class="a">商品介绍</li>
                <li>规则与包装</li>
                <li>售后保障</li>
                <li>商品评价（210万+）</li>
                <li>手机社区</li>
            </ul>
        </div>
        <div id="tcon">
             <div class="b">商品介绍</div>
             <div>规则与包装</div>
             <div>售后保障</div>
             <div>商品评价（210万+）</div>
             <div>手机社区</div>
        </div>
    </div>
    <script>
        var li = document.getElementById('thead').getElementsByTagName('li')

        var div = document.getElementById('tcon').getElementsByTagName('div')

        for(var i = 0 ; i < li.length ; i++){
            
            // for循环遇到点击事件会失效，所以在点击事件之前进行封存
            li[i].index = i

            li[i].onclick = function() {

                for(var j = 0; j < li.length ; j++){

                    li[j].className = "";

                    div[j].className = ""
                }
                this.className = "a"

                div[this.index].className = "b"

            }
        }
    </script>
</body>
</html>